<template>
    <div  class="app-container">
        <div class="filter-container" style="margin-bottom: 20px;">
         <el-row :gutter="20">
            <el-col :span="5">
            <el-input placeholder="请输入商品类型" v-model="listQuery.catId" clearable @clear="search" @keyup.enter.native="search" @blur="search">
            </el-input>
            </el-col>
             <el-col :span="5">
            <el-input placeholder="请输入商品名称" v-model="listQuery.goodsName" clearable @clear="search">
                <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
            </el-input>
            </el-col>
            <el-col :span="4">
            <el-button type="primary" @click="gotoAdd">增加商品</el-button></el-button><!-- 点击后跳转到路由/goods/add还是这个页面位置显示 -->
            </el-col>
        </el-row>
        </div>
<!-- table表格区域 -->
    <el-table :data="goodslist" border stripe height="550px">
      <el-table-column label="商品类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.catId }}
        </template>
      </el-table-column>
      <el-table-column label="商品名称" align="center" width="500px">
        <template slot-scope="scope">
          {{ scope.row.goodsName }}
        </template>
      </el-table-column>
      <el-table-column label="商品重量" align="center">
        <template slot-scope="scope">
          {{ scope.row.goodsWeight }}
        </template>
      </el-table-column>
      <el-table-column label="售价" align="center">
        <template slot-scope="scope">
          {{ scope.row.goodsPrice }}
        </template>
      </el-table-column>
      <el-table-column label="库存" align="center">
        <template slot-scope="scope">
          {{ scope.row.goodsNumber }}
        </template>
      </el-table-column>
      <el-table-column label="热卖数量" align="center">
        <template slot-scope="scope">
          {{ scope.row.hotMumber }}
        </template>
      </el-table-column>
        <el-table-column label="操作" width="130px">
          <template slot-scope="scope">
            <el-button type="primary" class="el-icon-edit" round size="mini" @click="updateById()">
          </el-button><el-button type="danger" icon="el-icon-delete" round size="mini" @click="removeById()"></el-button>
          </template>
        </el-table-column>
    </el-table>

      <!-- 分页区域  v-show="total>0"-->
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getGoodsList" />
  
    </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import {getGoodsList} from '@/api/goods'
  export default {
         name:'goodsList',
         components: { Pagination },
         data(){
             return{
                 listQuery:{
                    goodsName:undefined,
                    catId:undefined,
                    page: 1,
                    limit: 10,
                 },
                 // 商品列表
                goodslist: [],
                // 总数据条数
                 total: 0
             }
         },
         created(){
             this.getGoodsList()
         },
         methods:{
             search(){
                this.getGoodsList()
             },
             gotoAdd(){
                //  this.$router.push("/goods/addGoods")
                this.$router.replace('/goods/goodsAddAdd')
             },
             getGoodsList(){
               getGoodsList(this.listQuery).then((res)=>{
                   console.log('data: ', res);
                   this.goodslist = res.data
                   this.total = res.count
               })
             },
             getList() {
                  this.$message({
                     message: '暂未开发',
                     type: 'info'
                 })
            },
            updateById(){
                this.$message({
                     message: '暂未开发',
                     type: 'info'
                 })
            },
            removeById(){
                this.$message({
                     message: '暂未开发',
                     type: 'info'
                 })
            },
         }
    }
</script>

<style lang="scss" scoped>

</style>